<template>
  <div>
    <div class="transfer">
      <div>
        <Tabel
        ref="list"
          :columns="columns"
          :fixed="false"
          :table-data="list"
          :loading="loading"
          :is_height="400"
          :page-index="form"
          :isSele="true"
          @handleSelectionChange="handleSelectionChange"
        />
      </div>
      <div style="color: #fff">
        <el-button type="primary" icon="el-icon-arrow-left" @click="toLeft" />
        <el-button type="primary" icon="el-icon-arrow-right" @click="toRight" />
      </div>
      <div>
        <Tabel
          ref="choiceList"
          :columns="columns"
          :fixed="false"
          :table-data="choiceList"
          :is_height="400"
          :isSele="true"
          :page-index="{ size: choiceList.length, current: 1 }"
          @handleSelectionChange="handleSelectionChange"
        />
      </div>
    </div>
    <div>
      <div class="choice_btn">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Tabel from "@/components/Table";
export default {
  components: {
    Tabel,
  },
  props: {
    // 选中数据
    select: {
      type: Array,
      default: () => [],
    },
    // 待选数据
    waitForList: {
      type: Array,
      default: () => [],
    },
    // 显示表格
    columns: {
      type: Array,
      default: () => [],
    },
    form: {
      type: Object,
      default: () => {},
    },
    total: {
      type: Number,
      default: 0,
    },
    // 数据判断唯一值
    keys: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      list: [],
      // 暂存区
      mporaryList: [],
      // 已选中商品
      choiceList: [],
    };
  },
  created() {
    // 选中商品
    this.choiceList = [...this.select];
    // 待选商品
    this.list = [...this.waitForList];
    // 删除选中商品
    this.del(this.choiceList, this.list);
    // this.toggleRowSelection("choiceList");
  },
  methods: {
    onSubmit() {
      this.$emit("onSubmit", this.choiceList);
      // 清除选中数据
      this.choiceList = [];
    },
    // 取消
    cancel() {
      this.$emit("cancel");
      this.list = [...this.waitForList];
      this.choiceList = [];
    },
    // 多选选中数据
    handleSelectionChange(row) {
      this.mporaryList = [...row];
    },
    // 数据移除
    toLeft() {
      if (this.mporaryList.length === 0) return;
      // 删除选中的数据
      this.del(this.mporaryList, this.choiceList, "list");
      this.$refs.choiceList.$refs.singleTable.clearSelection();
    },
    // 数据添加到选中
    toRight() {
      if (this.mporaryList.length === 0) return;
      // 删除待选中商品
      this.del(this.mporaryList, this.list, "choiceList");
      this.$refs.list.$refs.singleTable.clearSelection();
    },
    // 删除商品
    del(mporary, choice, arr) {
      const key = this.keys;
      // 判断是否需要合并去重
      if (arr) {
        // 数组合并
        const list = [...this[arr], ...this.mporaryList];
        const obj = {};
        // 去重
        this[arr] = list.reduce((cur, next) => {
          obj[next[key]] ? "" : (obj[next[key]] = true && cur.push(next));
          return cur;
        }, []);
      }
      mporary.forEach((data) => {
        choice.forEach((item, index) => {
          if (item[key] === data[key]) {
            choice.splice(index, 1);
          }
        });
      });
    },
    // 分页事件
    pagination({ page: current, limit: size }) {
      this.form.current = current;
      this.$emit("query", this.form);
    },
    handleSizeChange({ page: current, limit: size }) {
      this.form.size = size;
      this.$emit("query", this.form);
    },
  },
};
</script>

<style scoped lang="less">
// 筛选
.search_wrap {
  margin: 10px 0;
}
// 穿梭表单
.transfer {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
  & > div {
    margin: 0 10px;
    width: 42%;
    &:nth-child(2) {
      width: 10%;
      display: flex;
      // text-align: center;
      justify-content: center;
      align-items: center;
    }
  }
}
// 按钮
.choice_btn {
  text-align: center;
  margin: 20px 0 0;
}
/deep/.el-transfer-panel {
  width: 280px !important;
}
/deep/.pagination-container {
  padding: 16px 0;
}
</style>
